<template>
  <div class="foot">
    <div class="content-box">
      <div class="left">
        <a>
          <img :src="require('@/assets/20210727223148.png')" alt="" />
        </a>
        <span>{{ $t("lang.address") + ":" + $t("lang.address_value") }} </span>
      </div>
      <div class="center">
        <h3 class="title">{{ $t("lang.navigation") }}</h3>
        <ul class="menus">
          <li>
            <a>
              <router-link to="/about-us">{{ $t("lang.aboutUs") }}</router-link>
            </a>
          </li>
          <li>
            <a>
              <router-link to="/product">{{ $t("lang.product") }}</router-link>
            </a>
          </li>
          <li>
            <a>
              <router-link to="/solution">{{
                $t("lang.solution")
              }}</router-link></a
            >
          </li>
          <li>
            <a>
              <router-link to="/successful-case">{{
                $t("lang.successfulCase")
              }}</router-link></a
            >
          </li>
          <li>
            <a>
              <router-link to="/news">{{ $t("lang.news") }}</router-link></a
            >
          </li>
          <li>
            <a>
              <router-link to="/contact-us">{{
                $t("lang.contactUs")
              }}</router-link></a
            >
          </li>
        </ul>
      </div>
      <div class="right">
        <h3 class="title">QH Code</h3>
        <img
          :src="require('@/assets/20211015224739.png')"
          border="0"
          class="ErWeiImg"
        />
      </div>
    </div>
    <div class="copyright-box">
      {{ $t("lang.copyright") }}
    </div>
  </div>
</template>
<script>
export default {
  name: "e-foot",
  data() {
    return {};
  },
};
</script>
<style lang="scss" scoped>
.foot {
  background-color: #000;
  margin-top: 30px;
  .content-box {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    padding-top: 30px;
    .left {
      width: 25%;
      padding: 0 20px 15px;
      a,
      span {
        color: #fff;
        display: block;
      }
    }
    .center {
      margin-top: 50px;
      padding: 0 20px 15px;
      width: 50%;
      .title {
        padding-bottom: 15px;
        border-bottom: 1px solid #333;
      }
      .menus {
        margin-top: 15px;
        li {
          width: 50%;
          float: left;
          a {
            padding: 5px 0;
            color: #fff;
          }
        }
      }
    }

    .right {
      max-width: 25%;
      padding: 0 20px 15px;
      .title {
        padding-bottom: 15px;
        margin-bottom: 15px;
        border-bottom: 1px solid #333;
      }
      img {
        width: 70px;
        margin-top: 64px;
      }
    }
  }

  .copyright-box {
    background: #051343;
    padding: 15px 0;
    text-align: center;
    color: #fff;
    font-size: 16px;
  }
}
</style>